<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="poster_page">
		<canvas canvas-id="poster0" class="poster_canvas0"></canvas>
		<canvas canvas-id="poster1" class="poster_canvas1"></canvas>
		<canvas canvas-id="poster2" class="poster_canvas2"></canvas>
		<canvas canvas-id="poster3" class="poster_canvas3"></canvas>
		<canvas canvas-id="poster4" class="poster_canvas4"></canvas>
		<swiper class="poster_swiper" previous-margin="110rpx" circular :current="swiperIndex" next-margin="110rpx"
			@change="onSwiperChange">
			<swiper-item v-for="(item, index) of promoteBgImgs" :key="index">
				<view class="poster_image" :class="{ active: swiperIndex == index }">
					<image class="poster_bg_image" :src="item" mode="widthFix"></image>
					<image :class="'poster_code_image'+index" :src="promoteCodeImg" mode="aspectFit"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="share_save_box">
			<!-- #ifdef MP -->
			<button open-type="share">
				<image src="../../static/images/my/share2/ic_pic.png" mode="aspectFit"></image>
				<text>发给好友</text>
			</button>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<button @click="onAppShare">
				<image src="../../static/images/my/share2/ic_pic.png" mode="aspectFit"></image>
				<text>发给好友</text>
			</button>
			<!-- #endif -->
			<button class="onSave" hover-class="hover-class" @click="onSaveImg">生成海报</button>

		</view>
		<!-- #ifdef H5 -->
		<view class="h5_press_save" v-if="h5SaveImg" @click="h5SaveImg = ''">
			<image :src="h5SaveImg" mode="widthFix"></image>
			<button class="download">长按二维码保存图片</button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import Qrcode from 'qrious';
	let settingWritePhotosAlbum = false;
	export default {
		data() {
			return {
				promoteBgImgs: [
					"../../static/images/my/share2/bg1.jpg",
					"../../static/images/my/share2/bg2.jpg",
					"../../static/images/my/share2/bg3.jpg",
					"../../static/images/my/share2/bg4.jpg",
					"../../static/images/my/share2/bg5.jpg",
				],
				//二维码
				promoteCodeImg: "",
				swiperIndex: 0,
				posterImgs: [],
				shareInfo: {
					shareContent: "商家云系统,点击了解",
					shareImg: "http://qn.kemean.cn/upload/202004/08/15863540965488mlv1qgj.png",
					shareTitle: "商家云",
					shareUrl: "http://kemean.com/download/3jiayunbz/index.html"
				},
				h5SaveImg: ""
			};
		},
		//第一次加载
		onLoad(e) {
			let protocol = window.location.protocol;
			let host = window.location.host;
			this.inviteUrl = protocol + '//' + host + "/#/pages/index/index?inviteCode=" + this.$store.state
				.user.userInfo.inviteCode
			console.log("url=" + this.inviteUrl)
			//绘制二维码图片
			let qr = new Qrcode({
				value: this.inviteUrl
			});
			this.promoteCodeImg = qr.toDataURL()
		},
		computed: {
			...mapState(["userInfo"])
		},
		//方法
		methods: {
			// 轮播图变化
			onSwiperChange(e) {
				this.swiperIndex = e.detail.current;
			},
			// 创建海报
			createPoster() {
				return new Promise((resolve, reject) => {
					if (this.posterImgs[this.swiperIndex]) {
						resolve(this.posterImgs[this.swiperIndex]);
					} else {
						uni.showLoading({
							title: '海报生成中'
						});
						let ctx = {};
						// ctx.fillRect(0, 0, 375, 667);

						if (this.swiperIndex == 0) {
							ctx = uni.createCanvasContext('poster0');
							ctx.fillRect(0, 0, 375, 594.64);
						} else if (this.swiperIndex == 1) {
							ctx = uni.createCanvasContext('poster1');
							ctx.fillRect(0, 0, 375, 548.95);
						} else if (this.swiperIndex == 2) {
							ctx = uni.createCanvasContext('poster2');
							ctx.fillRect(0, 0, 375, 666.66);
						} else if (this.swiperIndex == 3) {
							ctx = uni.createCanvasContext('poster3');
							ctx.fillRect(0, 0, 375, 596.34);
						} else if (this.swiperIndex == 4) {
							ctx = uni.createCanvasContext('poster4');
							ctx.fillRect(0, 0, 375, 502.77);
						}
						uni.downloadFile({
							url: this.promoteBgImgs[this.swiperIndex],
							success: res => {
								if (res.statusCode === 200) {
									// ctx.drawImage(res.tempFilePath, 0, 0, 375, 667);
									if (this.swiperIndex == 0) {
										ctx.drawImage(res.tempFilePath, 0, 0, 375, 594.64);
									} else if (this.swiperIndex == 1) {
										ctx.drawImage(res.tempFilePath, 0, 0, 375, 548.95);
									} else if (this.swiperIndex == 2) {
										ctx.drawImage(res.tempFilePath, 0, 0, 375, 666.66);
									} else if (this.swiperIndex == 3) {
										ctx.drawImage(res.tempFilePath, 0, 0, 375, 596.34);
									} else if (this.swiperIndex == 4) {
										ctx.drawImage(res.tempFilePath, 0, 0, 375, 502.77);
									}
									uni.downloadFile({
										url: this.promoteCodeImg,
										success: res => {
											if (res.statusCode === 200) {
												//调整生成的二维码位置
												if (this.swiperIndex == 0) {
													ctx.drawImage(res.tempFilePath,
														118, 257, 130, 130);
												} else if (this.swiperIndex == 1) {
													ctx.drawImage(res.tempFilePath,
														146, 205, 110, 110);
												} else if (this.swiperIndex == 2) {
													ctx.drawImage(res.tempFilePath,
														206, 431, 106, 106);
												} else if (this.swiperIndex == 3) {
													ctx.drawImage(res.tempFilePath,
														117.5, 120, 136, 136);
												} else if (this.swiperIndex == 4) {
													ctx.drawImage(res.tempFilePath,
														77, 152, 225, 225);
												}

												ctx.draw(true, () => {
													// canvas画布转成图片并返回图片地址
													uni.canvasToTempFilePath({
														canvasId: ('poster' +this.swiperIndex),
														width: 375,
														height: 667,
														success: res => {
															if (this
																.posterImgs[
																	this
																	.swiperIndex
																]
															) {
																this.posterImgs[
																		this
																		.swiperIndex
																	]
																	.temporary =
																	res
																	.tempFilePath;
															} else {
																this.posterImgs[
																	this
																	.swiperIndex
																] = {};
																this.posterImgs[
																		this
																		.swiperIndex
																	]
																	.temporary =
																	res
																	.tempFilePath;
															}
															resolve(res
																.tempFilePath
															);
															console
																.log(
																	res
																	.tempFilePath
																);
														},
														fail: () => {
															uni
																.hideLoading();
															reject();
														}
													});
												});
											} else {
												uni.hideLoading();
												uni.showToast({
													title: '海报制作失败，图片下载失败',
													icon: 'none'
												});
											}
										},
										fail: err => {
											uni.hideLoading();
											uni.showToast({
												title: '海报制作失败，图片下载失败',
												icon: 'none'
											});
										}
									});
								} else {
									uni.hideLoading();
									uni.showToast({
										title: '海报制作失败，图片下载失败',
										icon: 'none'
									});
								}
							},
							fail: err => {
								uni.hideLoading();
								uni.showToast({
									title: '海报制作失败，图片下载失败',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			// 保存图片
			async onSaveImg() {
				let imgUrl = "";
				if (this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].temporary) {
					imgUrl = await this.posterImgs[this.swiperIndex].temporary;
				} else {
					imgUrl = await this.createPoster();
				}
				// #ifdef H5
				this.h5SaveImg = imgUrl;
				uni.hideLoading();
				// #endif
				// #ifdef MP-WEIXIN
				uni.showLoading({
					title: '海报下载中'
				});
				if (settingWritePhotosAlbum) {
					uni.getSetting({
						success: res => {
							if (res.authSetting['scope.writePhotosAlbum']) {
								uni.saveImageToPhotosAlbum({
									filePath: imgUrl,
									success: () => {
										uni.hideLoading();
										uni.showToast({
											title: '保存成功'
										});
									}
								});
							} else {
								uni.showModal({
									title: '提示',
									content: '请先在设置页面打开“保存相册”使用权限',
									confirmText: '去设置',
									cancelText: '算了',
									success: data => {
										if (data.confirm) {
											uni.hideLoading();
											uni.openSetting();
										}
									}
								});
							}
						}
					});
				} else {
					settingWritePhotosAlbum = true;
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success: () => {
							uni.saveImageToPhotosAlbum({
								filePath: imgUrl,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存成功'
									});
								}
							});
						}
					});
				}
				// #endif
				// #ifdef APP-PLUS
				uni.showLoading({
					title: '海报下载中'
				});
				uni.saveImageToPhotosAlbum({
					filePath: imgUrl,
					success: () => {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功'
						});
					}
				});
				// #endif
			},
			async onAppShare() {
				// let imgUrl = "";
				// if(this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].url){
				// 	imgUrl = this.posterImgs[this.swiperIndex].url;
				// } else if(this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].temporary){
				// 	let imgData = await this.$http.qnFileUpload([this.posterImgs[this.swiperIndex].temporary]);
				// 	imgUrl = imgData[0];
				// }else{
				// 	let data = await this.createPoster();
				// 	let imgData = await this.$http.qnFileUpload([data]);
				// 	imgUrl = imgData[0];
				// }
				// uni.hideLoading();
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					title: this.shareInfo.shareTitle,
					href: this.shareInfo.shareUrl,
					summary: this.shareInfo.shareContent,
					imageUrl: this.shareInfo.shareImg,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			let shareInfo = {
				path: this.$base.share.path,
				title: this.shareInfo.shareTitle,
				imageUrl: this.shareInfo.shareImg
			};
			if (this.userInfo.token) {
				if (shareInfo.path.indexOf("?") >= 0) {
					shareInfo.path += "&recommendCode=" + this.userInfo.uid;
				} else {
					shareInfo.path += "?recommendCode=" + this.userInfo.uid;
				}
			}
			return shareInfo;
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/components/share/mixin.scss';

	.poster_page {
		min-height: 70vh;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	.poster_canvas0 {
		// width: 750rpx;
		// height: 1334rpx;
		width: 950rpx;
		height: 1189.28rpx;
		position: fixed;
		top: -10000rpx;
		left: 0rpx;
	}

	.poster_canvas1 {
		width: 950rpx;
		height: 1097.9rpx;
		position: fixed;
		top: -10000rpx;
		left: 0rpx;
	}

	.poster_canvas2 {
		width: 950rpx;
		height: 1333.32rpx;
		position: fixed;
		top: -10000rpx;
		left: 0rpx;
	}

	.poster_canvas3 {
		width: 950rpx;
		height: 1192.68rpx;
		position: fixed;
		top: -10000rpx;
		left: 0rpx;
	}

	.poster_canvas4 {
		width: 950rpx;
		height: 1005.54rpx;
		position: fixed;
		top: -10000rpx;
		left: 0rpx;
	}

	.poster_swiper {
		height: 934rpx;
		width: 100%;

		swiper-item {
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.poster_image {
				width: 100%;
				height: 100%;
				transform: scale(0.88);
				transition: all 0.4s;
				position: relative;
				display: flex;
				align-items: flex-end;
				overflow: hidden;

				&.active {
					transform: scale(1);
				}

				.poster_bg_image {
					width: 100%;
					height: 100%;
				}

				.poster_code_image0 {
					position: absolute;
					bottom: 296.7rpx;
					width: 185rpx;
					height: 185rpx;
					left: 48.7%;
					transform: translateX(-50%);
				}

				.poster_code_image1 {
					position: absolute;
					bottom: 332rpx;
					width: 160rpx;
					height: 160rpx;
					left: 53.6%;
					transform: translateX(-50%);
				}

				.poster_code_image2 {
					position: absolute;
					bottom: 190rpx;
					width: 145rpx;
					height: 145rpx;
					left: 69%;
					transform: translateX(-50%);
				}

				.poster_code_image3 {
					position: absolute;
					bottom: 486rpx;
					width: 193rpx;
					height: 193rpx;
					left: 49.5%;
					transform: translateX(-50%);
				}

				.poster_code_image4 {
					position: absolute;
					bottom: 180rpx;
					width: 320rpx;
					height: 320rpx;
					left: 50.5%;
					transform: translateX(-50%);
				}
			}
		}
	}

	.share_save_box {
		position: fixed;
		bottom: calc((100vh - 934rpx - 240rpx) / 4);
		left: 0;
		z-index: 6;
		width: 100%;
		display: flex;
		justify-content: space-around;

		button {
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			margin: 40rpx;
			background-color: #1243cd;
			font-size: 32rpx;
			color: #fff;
			border-radius: 12rpx;
			font-weight: bold;
		}
	}

	.h5_press_save {
		background-color: #000;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		z-index: 100;

		image {
			width: 100%;
		}

		.download {
			font-size: 24rpx;
			color: #ffffff;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: center;
			position: absolute;
			padding: 5rpx 30rpx;
			border-radius: 40rpx;
			bottom: 30rpx;
			left: 50%;
			transform: translateX(-50%);

			&:before {
				content: '';
				@include bis('@/static/images/my/share2/icon_download.png');
				width: 24rpx;
				height: 24rpx;
				margin-right: 15rpx;
			}
		}
	}
</style>
